<template>
  <h1 class="container">Hello Vue3</h1>
  <h2>{{ $store.state.user.profile }}</h2>
  <button @click="btn">改ID</button>
</template>

<script>
import { useStore } from 'vuex'

export default {
  setup () {
    // Vue2.x 写法，通过 this 获取
    // this.$store.state.user.profile.nickname
    // 🔔 Vue3.x 写法，通过 useStore() 获取
    const store = useStore()
    console.log(store.state.user.profile.nickname)

    const btn = () => {
      store.commit('user/setUserId', 304)
    }
    return { btn }
  }
}
</script>

<style lang="less" scoped>
// 💥 注意：在 less 中用 src 别名的时候需要写成  ~@
// @import "~@/styles/variables.less";

h1 {
  background-color: @xtxColor;
}
h2{
  background: url(~@/assets/images/loading.gif);
}
</style>
